<template>
	<view>
		<view class="main">
			<indexView @shop='shop' v-if="path=='pages/index/index'"></indexView>
			<shopView v-else-if="path=='pages/shop/shop'"></shopView>
			<adoptView :isBack="isBack" v-else-if="path=='pages/my/adopt/myadopt'"></adoptView>
			<showCarView v-else-if="path=='pages/shop/showCar/showCar'"></showCarView>
			<myView v-else-if="path=='pages/my/my'"></myView>
		</view>

		<view class="tabBar">
			<view class="itemKen" v-for="(item,i) in list">
				<template v-if="i!=2">
					<view class="item" @click="selectTab(item,i)">
						<view class="li">
							<image class="icon" v-if="activeIndex==i"
								:src="'../static/index/'+item.selectedIconPath+'.png'" mode="aspectFill">
							</image>
							<image class="selectedIcon" v-else :src="'../static/index/'+item.iconPath+'.png'"
								mode="aspectFill"></image>
							<view class="title" :class="{'active':activeIndex==i}">
								{{item.text}}
							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="roundItem">
						<view class="roundOut" @click="selectTab(item)">
							<view class="roundIconBox">
								<image class="roundIcon" :src="'../static/index/'+item.iconPath+'.png'"
									mode="aspectFill">
								</image>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>


<script>
	import indexView from 'pages/index/index'
	import shopView from 'pages/shop/shop'
	import showCarView from 'pages/shop/showCar/showCar'
	import myView from 'pages/my/my'
	import adoptView from 'pages/my/adopt/myadopt'
	export default {
		data() {
			return {
				list: [{
						pagePath: "pages/index/index",
						text: "首页",
						iconPath: "home1",
						selectedIconPath: "home"
					},
					{
						pagePath: "pages/shop/shop",
						text: "分享",
						iconPath: "code1",
						selectedIconPath: "code"
					},
					{
						pagePath: "pages/my/adopt/myadopt",
						text: uni.getStorageSync('titleKey'),
						iconPath: "mifeng",
					},
					{
						pagePath: "pages/shop/showCar/showCar",
						text: "购物车",
						iconPath: "buyCar1",
						selectedIconPath: "buyCar"
					},
					{
						pagePath: "pages/my/my",
						text: "我的",
						iconPath: "my1",
						selectedIconPath: "my"
					}
				],
				path: 'pages/index/index',
				// path: 'pages/my/my',

				activeIndex: '0',

			}
		},
		onLoad(e) {
			if (e.path) {
				this.path = e.path
				this.activeIndex = 3
			}
			this.$api.request('system/user/getTitleKey').then(res => {
				uni.setStorageSync('titleKey', res.data.titleKey)
			})
			if (e.scene) {
				uni.setStorageSync('shareIdCode', e.scene)
			}
		},
		created() {
			this.getNavBarHeight()
			console.log(this.titleKey, 333333)
		},
		methods: {
			shop() {
				this.path = 'pages/shop/shop'
				this.activeIndex = 1
			},
			auditSubscriptionsSetting() {
				let that = this;
				const tmplId = 'fOcgDlMNhJ9I0OsfTJcBadUQHtstIlKKwlqPjnOR-iI'; //模板id
				uni.getSetting({
					withSubscriptions: true,
					success(res) {
						console.log(res)
						if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
							if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[
									tmplId]) {
								let item = res.subscriptionsSetting.itemSettings[tmplId];
								if (item == 'reject') {
									console.log('提示：用户拒绝订阅消息');
									that.followComfirm(tmplId);
								} else if (item == 'accept') {
									console.log('提示：您已经开启订阅消息');
								} else if (item == 'ban') {
									console.log('提示：您已经被后台封禁');
								}
							} else {
								console.log('提示：用户没有勾选订阅消息或者没有状态');
								that.followComfirm(tmplId);
							}
						} else {
							console.log('提示：订阅消息主开关没打开');
							that.followComfirm(tmplId);
						}
					}
				});
			},

			// 订阅信息
			followComfirm(tmplId) {
				uni.showModal({
					title: '订阅消息',
					content: '请同意我们给您推送信息，以便接受租户提交审核提醒。',
					success: (res) => {
						if (res.confirm) {
							uni.requestSubscribeMessage({
								tmplIds: [tmplId],
								success: (res) => {
									if (res[tmplId] === 'accept') {
										uni.showToast({
											title: '订阅成功！',
											icon: 'success'
										});
									} else if (res[tmplId] == 'reject') {
										//引导用户，手动引导用户点击按钮，去设置页开启，## Modals是自定义组件
										uni.showModal({
											title: '订阅消息',
											content: '您当前拒绝接受消息通知，是否去开启',
											confirmText: '开启授权',
											confirmColor: '#345391',
											cancelText: '仍然拒绝',
											cancelColor: '#999999',
											success(res) {
												if (res.confirm) {
													console.log('用户点击确定');
													uni.openSetting({
														success(res) {
															console.log(res
																.authSetting);
														},
														fail(err) {
															//失败
															console.log(err);
														}
													});
												} else if (res.cancel) {
													console.log('用户点击取消');
												}
											}
										});
									}
								},
								fail(err) {
									//失败
									console.log(err);
								}
							});
						}
					}
				});
			},

			selectTab(item, i) {
				this.path = item.pagePath
				this.activeIndex = i

				if (item.pagePath == 'pages/my/adopt/myadopt') {
					this.isBack = false
					this.activeIndex = 2
				}
			},
			getNavBarHeight() {
				let res = wx.getSystemInfoSync()
				let navBarHeight = res.statusBarHeight + 44 //顶部状态栏+顶部导航，大部分机型默认44px
				wx.setStorage({
					key: "navBarHeight",
					data: navBarHeight
				})

			}
		},
		components: {
			indexView,
			shopView,
			showCarView,
			myView,
			adoptView
		}
	}
</script>

<style scoped lang="scss">
	.main {
		height: calc(100vh - 100rpx);
		width: 100vw;
	}

	.tabBar {
		height: 100rpx;
		width: 100%;
		display: flex;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		z-index: 9999;
		box-shadow: 0rpx 0rpx 14rpx #EDEFF2;
		border-top: 1rpx solid #EDEFF2;



		.item {
			width: calc(750rpx / 5);
			display: flex;
			align-items: center;
			justify-content: center;

			.li {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.title {
					margin-top: 5rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;

					&.active {
						color: #DF4330;
					}
				}

				.icon {
					width: 38rpx;
					height: 40rpx;
				}

				.selectedIcon {
					width: 38rpx;
					height: 40rpx;
				}
			}
		}

		.itemKen {
			flex: 1;
			display: flex;
			justify-content: center;
		}

		.roundItem {
			flex: 1;
			display: flex;
			justify-content: center;

			.roundOut {
				height: 129rpx;
				width: 129rpx;
				border-radius: 50%;
				background-color: #FEF7F7;
				position: relative;
				z-index: 1000;
				top: -40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.roundIconBox {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 120rpx;
					width: 120rpx;
					border-radius: 50%;
					background: linear-gradient(-49deg, #FE471E, #D40101);

					.roundIcon {
						width: 81rpx;
						height: 71rpx;
					}
				}
			}


		}

	}
</style>